<template>
	<view v-if="props.doctor" class="gy-panel-doctor" @click="toDetailsFn">
		<com-avatar :src='props.doctor.avatar' :radius="50" default="982345b86de646b6b645689880753c5ccae4fd146cb05e0b440aa1256313fe82.png" />
		<view class="doctor-info">
			<view class="doctor-head">
				<view class="doctor-name">{{props.doctor.name}}<text>{{props.doctor.positionName}}</text></view>
				<view v-if="doctor.type===1" class="doctor-category doctorClass" >医</view>
				<view v-if="doctor.type===2" class="doctor-category nurseClass" >护</view>
				<view v-if="doctor.type===3" class="doctor-category pharmacistClass" >药</view>
			</view>
			<view class="doctor-dept">
				<!-- {{props.doctor.positionName}}
				<text v-if="props.doctor.positionName && props.doctor.departmentName">|</text> -->
				{{props.doctor.departmentName}}
			</view>
			<!-- <view class="doctor-org">
				<com-tag v-if="props.doctor.hospitalRank || props.doctor.hospitalLevel" type="warning">
					{{props.doctor.hospitalRank || props.doctor.hospitalLevel}}
				</com-tag>
				{{props.doctor.hospitalName}}
			</view> -->
			<slot></slot>
		</view>
	</view>
</template>

<script lang="ts" setup>

	import {
		getCurrentInstance
	} from "vue";

	const props = defineProps({
		doctor: {
			type: Object
		},
		props: {
			type: Object
		},
		returnVisit:{
			type:String,
			default:'0'
		}
	});

	const { proxy } : any = getCurrentInstance();

	function toDetailsFn() {
		console.log(props.doctor)
		console.log(props.returnVisit)
		if(props.returnVisit == '1'){
			proxy.utils.uni.route.go("/pages-hospital-services/ask-diagnosis/disease-description/index", {
				doctorId: props.doctor.id,
				deptId: props.doctor.departmentId,
				returnVisit:props.returnVisit,
				type:1,
				price:props.doctor.txtPrice,
				hospitalId:"3"
			});
			
			// proxy.utils.uni.route.go("/pages-hospital-services/ask-diagnosis/doctor/index", {
			// 	doctorId: props.doctor.id,
			// 	deptId: props.doctor.departmentId,
			// 	returnVisit:props.returnVisit
			// });
		}else{
			proxy.utils.uni.route.go("/pages-hospital-services/ask-diagnosis/doctor/index", {
				doctorId: props.doctor.id,
				deptId: props.doctor.departmentId,
				returnVisit:props.returnVisit
			});
		}
		
	}

</script>

<script lang="ts">
	export default {
		options: {
			multipleSlots: true,
			styleIsolation: 'shared',
			addGlobalClass: true,
			virtualHost: true
		}
	}
</script>

<style lang="scss" scoped>
	.gy-panel-doctor {
		@include flex-between;
		padding: 10rpx var(--gy-gap) var(--gy-gap) var(--gy-gap);

		:deep(.gy-avatar){
			display: block;
		}

		.doctor-info {
			flex: 1;
			font-size: var(--gy-font-size-medium);
			color: var(--gy-text-color-primary);
			padding-left: var(--gy-gap);

			.doctor-head {
				@include flex-between-center;

				.doctor-name {
					min-width: 130rpx;
					font-weight: bold;
					font-size: var(--gy-font-size-large);
					line-height: 40rpx;
					text{
						font-size: 28rpx;
						margin-left: 20rpx;
						color: var(--gy-text-color-secondary);
						font-weight: 400;
					}
				}

				.doctor-category{
					margin-left: 18rpx;
					width: 36rpx;
					height: 36rpx;
					border-radius: 6rpx;

					text-align: center;
					line-height: 36rpx;
					font-size: 24rpx;
					color: #fff;
				}
				.doctor-isNotOnline{
					width: 63rpx;
					height: 32rpx;
					background: rgba(46,52,74,0.39);
					text-align: center;
					line-height: 32rpx;
					color: #2E344A;
					font-size: 22rpx;
					margin-left: 20rpx;
				}
				.doctorClass{
					background: #63B566;
				}
				.nurseClass{
					background: #FE6897;
				}
				.pharmacistClass{
					background: #FF8E12;
				}

			}
			.doctor-dept{
				margin-top: 20rpx;
				font-size: var(--gy-font-size-base);
				color: var(--gy-text-color-primary);

				text {
					margin: 0 10rpx;
					font-size: var(--gy-font-size-small);
					color: var(--el-text-color-disabled);
				}
			}
			.doctor-org {
				margin-top: 20rpx;
				font-size: var(--gy-font-size-base);

				:deep(.gy-tag) {
					vertical-align: 0.2em;
					margin-right: 5rpx;
					border: none;
				}
			}

		}
	}

	.gy-panel-doctor+.gy-panel-doctor {
		padding: var(--gy-gap);
		border-top: 1rpx solid var(--gy-card-line-color);
	}

	.doctor-org {
		:deep(.warning) {
			background: rgba(222, 144, 55, .1) !important;
			color: #C87113 !important;
		}
	}

	.doctor-tags {
		:deep(.warning) {
			background: rgba(222, 144, 55, .1) !important;
			color: #C87113 !important;
		}
	}
</style>
